<template>
  <el-dialog
    title="订单详情"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose"
    class="order-detail-dialog"
  >
    <div class="dialog-content" v-loading="loading">

      <h4 class="section-title">订单信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">订单编号:</span>
          <span class="info-value">{{ detailData.orderNo }}</span>
        </el-col>
        <!-- <el-col :span="12" class="info-item">
          <span class="info-label">三方单号:</span>
          <span class="info-value">{{ detailData.orderCode || '--' }}</span>
        </el-col> -->

        <el-col :span="12" class="info-item">
          <span class="info-label">创建时间:</span>
          <span class="info-value">{{ $commonUtils.getShowTime(detailData.createTime) }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">订单状态:</span>
          <span :class="['info-value', getStatusClass(detailData.orderState)]">{{ detailData.orderState == '-1'?'已取消':detailData.orderState == 0?'待支付':'已支付'  }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">支付时间:</span>
          <span class="info-value">{{detailData.payTime !=0? $commonUtils.getShowTime(detailData.payTime) :'--' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">交易流水号:</span>
          <span class="info-value">{{ detailData.tradeNo || '--' }}</span>
        </el-col>

        <el-col :span="12" class="info-item">
          <span class="info-label">充值活动:</span>
          <span class="info-value">{{ detailData.activityName || '--' }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">活动编号:</span>
          <span class="info-value">{{ detailData.rechargeActivityItemId  || '--'}}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">支付信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">充值金额:</span>
          <span class="info-value price">{{ ' ¥' +$amountUtils.getYuan(detailData.topMoney) }}</span>
        </el-col>
        <el-col :span="12" class="info-item" v-if="detailData.topType === 1">
          <span class="info-label">充值优惠:</span>
          <span class="info-value" v-if="detailData.discountType ==1">赠送{{ ' ¥' +$amountUtils.getYuan(detailData.bonusMoney) }}</span>
          <span class="info-value" v-else>赠送礼品（价值{{ ' ¥' +$amountUtils.getYuan(detailData.giftValue) }}）</span>
        </el-col>
        <el-col :span="12" class="info-item" v-else>
          <span class="info-label">充值优惠:</span>
          <span class="info-value">--</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">支付方式:</span>
          <span class="info-value">{{ detailData.payType }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title" v-if="detailData.discountType ==2">礼品信息</h4>
      <el-table
       v-if="detailData.discountType ==2"
        :data="detailData.activityGoods"
        border
        style="width: 100%; margin-top: 10px;"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <!-- <el-table-column prop="index" label="序号" width="60" align="center" /> -->
        <el-table-column label="商品信息">
          <template slot-scope="scope">
            <div class="product-info-cell">
              <img :src="scope.row.imageUrl" class="product-image">
              <div class="product-details">
                <p class="product-name">{{ scope.row.goodsName }}</p>
                <p class="product-code">{{ scope.row.barCode }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="currentGoodsUnitType" label="包装" align="center" width="160" />
        <el-table-column prop="goodsCount" label="数量 / 份" align="center" width="160" />
        <el-table-column prop="goodsCount" label="份数" align="center" width="160" >
          <template slot-scope="scope">
            <div style="text-align: center;">
              1
            </div>
          </template>
        </el-table-column>
      </el-table>

      <h4 class="section-title">会员信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">用户姓名:</span>
          <span class="info-value">{{ detailData.userName }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">用户账号:</span>
          <span class="info-value">{{ detailData.mobile }}</span>
        </el-col>
      </el-row>

      <h4 class="section-title">门店信息</h4>
      <el-row :gutter="20" class="detail-block">
        <el-col :span="12" class="info-item">
          <span class="info-label">门店名称:</span>
          <span class="info-value">{{ detailData.organizationName }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="info-label">门店编号:</span>
          <span class="info-value">{{ detailData.storeId }}</span>
        </el-col>
      </el-row>

    </div>

    </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 订单编号，用于加载详情
    orderId: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      loading: false,
      // 模拟详情数据结构
      detailData: {
      }
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val && this.orderId) {
        this.getOrderDetail(this.orderId)
      }
    }
  },
  methods: {
    /**
     * @description 根据状态返回样式类
     */
    getStatusClass(status) {
        switch (status) {
            case 1: // 已支付
                return 'status-paid';
            case -1: // 已取消
                return 'status-canceled';
            case 0: // 待支付
                return 'status-pending';
            default:
                return '';
        }
    },
    /**
     * @description 关闭弹窗并通知父组件
     */
    handleClose() {
      // 触发父组件的 update:visible 事件来关闭弹窗
      this.$emit('update:visible', false)
    },

    /**
     * @description 模拟请求订单详情数据
     */
    getOrderDetail(id) {
      this.loading = true
      this.$api.getStoreRechargeDetail({ memberRechargeOrderId: id })
        .then(response => {
          // 假设返回的数据结构与 detailData 相同
          console.log('订单详情数据:', response)
          this.detailData = response
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail-dialog {

  .dialog-content {
    padding: 0 10px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin: 20px 0 15px 0;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }

  .detail-block {
    margin-bottom: 5px;
  }

  .info-item {
    line-height: 2;
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;

    .info-label {
      color: #909399;
      display: inline-block;
      width: 90px;
      text-align: right;
      margin-right: 8px;
      flex-shrink: 0;
    }
    .info-value {
      color: #303133;
      font-weight: 500;
      word-break: break-all;
    }

    /* 订单状态颜色 */
    .status-paid {
      color: #67C23A; /* 绿色 */
    }
    .status-canceled {
      color: #F56C6C; /* 红色 */
    }
    .status-pending {
      color: #E6A23C; /* 黄色 */
    }

    .price {
        font-weight: bold;
        color: #F56C6C;
    }
  }

  /* 商品信息表格单元格样式 */
  .product-info-cell {
    display: flex;
    align-items: center;
    padding: 5px 0;

    .product-image {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      border: 1px solid #EBEEF5;
      flex-shrink: 0;
    }

    .product-details {
      min-width: 0;

      .product-name {
        font-size: 14px;
        color: #303133;
        margin: 0;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .product-code {
        font-size: 12px;
        color: #909399;
        margin: 4px 0 0 0;
        line-height: 1.2;
      }
    }
  }
}
</style>
